.header {
  background: url("../img/page1/title.png") center no-repeat;
}

.title {
  width: 100%;
  height: 58px;
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.left-content {
  float: left;
  width: 1290px;
  height: 938px;
  padding: 0 30px 20px 30px;
  background: url("../img/page1/left-bg.png");

  .sum-list {
    width: 100%;
    height: 158px;

    .sum-detail {
      width: 288px;
      height: 123px;
      background: url("../img/page1/sum-bg.png");

      .icon {
        &.icon1 {
          background: url("../img/page1/icon1.png") center no-repeat;
        }

        &.icon2 {
          background: url("../img/page1/icon2.png") center no-repeat;
        }

        &.icon3 {
          background: url("../img/page1/icon3.png") center no-repeat;
        }

        &.icon4 {
          background: url("../img/page1/icon4.png") center no-repeat;
        }
      }
    }
  }

  .table-container {
    width: 100%;
    height: 620px;
    margin-top: 21px;
    border: 1px solid #0a38af;
    padding: 0 10px 10px 10px;

    .item-list {
      height: 42px;
      line-height: 42px;

      li {
        float: right;
        margin-top: 12px;
        margin-left: 25px;
      }

      .item1 {
        width: 66px;
        height: 21px;
        background: url("../img/page1/item1.png");
      }

      .item2 {
        width: 67px;
        height: 21px;
        background: url("../img/page1/item2.png");
      }

      .item3 {
        width: 70px;
        height: 20px;
        background: url("../img/page1/item3.png");
      }
    }
  }

  .vticker-body {
    height: 523px;

    ul {
      >li {
        height: 65px;
        line-height: 65px;

        .status {
          display: inline-block;
          vertical-align: middle;
          width: 22px;
          height: 22px;
          border-radius: 50%;

          &.status1 {
            background: #4eec97;
          }
        }

        div {
          float: left;
          width: 20%;
          text-align: center;
          height: 100%;
          font-size: 19px;
          border: 1px solid #0c38ad;
          border-right: none;

          &:last-child {
            border-right: 1px solid #0c38ad;
          }
        }
      }
    }
  }
}

.right-content {
  float: right;
  width: 562px;
  height: 938px;
  padding: 0 15px 10px 15px;
  background: url("../img/page1/right-bg.png");

  .vticker-body {
    height: 520px;

    ul {
      >li {
        height: 58px;
        line-height: 58px;
        display: flex;

        div {
          flex: 1;
          text-align: center;
          height: 100%;
          font-size: 19px;
          border: 1px solid #0c38ad;
          border-right: none;

          &:last-child {
            border-right: 1px solid #0c38ad;
          }
        }
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 204px;
    padding: 16px 24px 40px 30px;

    p {
      font-size: 16px;
    }

    .chart-content {
      margin-top: 15px;

      .chart-inner {
        display: inline-block;
        vertical-align: middle;
        width: 85%;
        height: 24px;
        padding: 5px;
        border-radius: 12px;
        border: 1px solid #0264a5;

        .chart-bar {
          width: 100%;
          height: 100%;
          border-radius: 7px;
          background: linear-gradient(to right, #00fe94 0%, #00fcff 100%);
        }
      }

      .chart-percent {
        display: inline-block;
        vertical-align: middle;
        padding-left: 15px;
      }
    }
  }
}